import React from "react";
import "./charRoom.scss";
import { Input, Button, List } from "antd";
import Modal from "antd/lib/modal/Modal";
import { QqOutlined } from "@ant-design/icons";

class CharRoom extends React.Component {
  state = {
    TextAreaValue: "",
    userLlistFlag: false,
    banWordFlag: false,
    banWord: "",
    privateFlag: false,
    pri_input: "",
    pri_user: {
      id: "",
    },
  };

  scrollBoottom = () => {
    if (this.messagesEnd) {
      const scrollHeight = this.messagesEnd.scrollHeight;//里面div的实际高度  2000px
      const height = this.messagesEnd.clientHeight - 100;  //网页可见高度  200px
      const maxScrollTop = scrollHeight - height;
      this.messagesEnd.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;

    }
  }

  sendMess = () => {
    const { pri_input, pri_user } = this.state;
    console.log(pri_input);
    this.props.touchOne([pri_user.id, pri_input, this.props.joinRooms.id]);
    this.setState({
      pri_input: ""
    })

    if (this.pr_messagesEnd) {
      const scrollHeight = this.pr_messagesEnd.scrollHeight;//里面div的实际高度  2000px
      const height = this.pr_messagesEnd.clientHeight - 130;  //网页可见高度  200px
      const maxScrollTop = scrollHeight - height;
      this.pr_messagesEnd.scrollTop = maxScrollTop > 0 ? maxScrollTop : 0;

    }
  };
  render() {
    const { joinRooms, userId, myUserRoomMess, userList } = this.props;
    const { pri_user } = this.state;
    const userMessList = myUserRoomMess[pri_user.id]
      ? myUserRoomMess[pri_user.id]
      : [];

    const newUserLIst = userList.map((item) => {
      item.newId = item.id;
      return item;
    });

    return (
      <div className='CR_con'>
        <div className='title'>
          <b>Room Name: {joinRooms.name}</b>
        </div>
        <div className='head'>
          <b>Current Count Of Users: {this.props.userList.length}</b>
          <Button
            type='primary'
            onClick={() => {
              this.setState({
                userLlistFlag: true,
              });
            }}
            className='button1'
          >
            Show all users
          </Button>

          <Button
            type='primary'
            danger
            onClick={() => {
              this.props.exiRoom(this.props.joinRooms.id);
            }}
            className='button2'
          >
            Quit this room
          </Button>

          {userId === joinRooms.creatorId && (
            <Button
              type='primary'
              onClick={() => {
                this.setState({
                  banWordFlag: true,
                });
              }}
              className='button1'
            >
              Set Ban Words
            </Button>
          )}
        </div>
        <div className='messCon'>
          <div className='con' ref={(el) => { this.messagesEnd = el; }}>
            {this.props.messageList &&
              this.props.messageList.length > 0 &&
              this.props.messageList.map((item, key) => {
                return (
                  <div
                    className={
                      item.userId === this.props.userId ? "itemRev" : "item"
                    }
                    key={key}
                  >
                    <span style={{
                      fontSize: "1.4em",
                      lineHeight: "1.4em",
                      margin: "0 5px"

                    }}>{item.userName}</span>:
                    <span style={{
                      margin: "0 10px",
                      lineHeight: "1.4em",
                    }}>{item.msg}</span>
                  </div>
                );
              })}
            <div ></div>
          </div>
          <div className='inputText'>
            <Input
              rows={1}
              onKeyDown={(e) => {
                if (e.keyCode === 13) {
                  this.props.sendMess([
                    this.props.joinRooms.id,
                    this.state.TextAreaValue,
                  ]);
                  this.setState({
                    TextAreaValue: "",
                  });
                  this.scrollBoottom()
                }
                // e.preventDefault();
              }}
              onChange={(e) => {
                this.setState({
                  TextAreaValue: e.target.value,
                });
              }}
              value={this.state.TextAreaValue}
            />
            <Button
              type='primary'
              onClick={() => {
                this.props.sendMess([
                  this.props.joinRooms.id,
                  this.state.TextAreaValue,
                ]);
                this.setState({
                  TextAreaValue: "",
                });
                this.scrollBoottom()
              }}
              className='button'
            >
              Send
            </Button>
          </div>
        </div>

        <Modal
          visible={this.state.userLlistFlag}
          footer={null}
          onCancel={() => {
            this.setState({
              userLlistFlag: false,
            });
          }}
        >
          <List
            itemLayout='horizontal'
            dataSource={newUserLIst}
            renderItem={(item) => (
              <List.Item>

                <div style={{
                  display: "flex",
                  flexDirection: "row",
                  justifyContent: "space-around",
                  width: "100%"
                }}>
                  <span><QqOutlined />{item.name}</span>

                  {item.newId !== userId && userId === joinRooms.creatorId && (
                    <div>
                      <Button
                        onClick={() => {
                          this.props.kick([item.id, joinRooms.id]);
                        }}
                        size='small'
                      >
                        kick out
                      </Button>

                      <Button
                        onClick={() => {
                          this.props.ban([item.id, joinRooms.id]);
                        }}
                        size='small'
                      >
                        kept out
                      </Button>
                    </div>
                  )}

                  {item.newId !== userId &&
                    <Button
                      type='primary'
                      size='small'
                      onClick={() => {
                        this.setState({
                          userLlistFlag: false,
                          privateFlag: true,
                          pri_user: item,
                        });
                      }}
                    >
                      chat
                    </Button>
                  }
                </div>
              </List.Item>
            )}
          />
        </Modal>

        <Modal
          visible={this.state.banWordFlag}
          onOk={() => {
            if (this.props.banWord) {
              this.props.banWord([this.props.joinRooms.id, this.state.banWord]);
              setTimeout(() => {
                this.setState({
                  banWordFlag: false,
                });
              }, 10);
            }
          }}
          onCancel={() => {
            this.setState({
              banWordFlag: false,
            });
          }}
        >
          banWord:
          <Input
            value={this.state.banWord}
            onChange={(e) => {
              this.setState({
                banWord: e.target.value,
              });
            }}
          ></Input>
        </Modal>

        <Modal
          footer={false}
          title='Private chat'
          onCancel={() => {
            this.setState({
              privateFlag: false,
            });
          }}
          visible={this.state.privateFlag}
        >
          <div className='priModal'>
            <div className='cont' ref={(el) => { this.pr_messagesEnd = el; }}>
              {userMessList &&
                userMessList.map((item, key) => {
                  return (
                    <div
                      className={item.id === userId ? "right" : "left"}
                      key={key}
                    >
                      <span>{item.name}</span>:<span>{item.msg}</span>
                    </div>
                  );
                })}
            </div>
            <div className='bot_send'>
              <Input
                value={this.state.pri_input}
                onChange={(e) => {
                  this.setState({
                    pri_input: e.target.value,
                  });
                }}
                onKeyDown={(e) => {
                  if (e.keyCode === 13) {
                    this.sendMess()
                  }
                }}
              ></Input>
              <Button onClick={this.sendMess} type='primary'>
                Send
              </Button>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default CharRoom;
